<template>
	<view class="xy-user-card flex ali-cen psr" :style="{'margin':'0 '+ data.params.lrmargin+'rpx'}">
		
		<view class="l" :class="user.isLogin ? 'm-r-30' : ''">
			<image v-if="user.isLogin" :src="$xyfun.image(user.info.avatar?user.info.avatar:common.appConfig.useravatar)" @tap="$xyfun.to('/pages/user/user')" />
			<image v-else src="/static/img/login/moren.png" style="width: 180rpx;height: 180rpx;" @click="toLogin()" />
		</view>
		<view class="c">
			<view v-if="user.isLogin" @tap="$xyfun.to('/pages/user/user')">
				<view class="ts-40 flex lh-32 p-t-20 tb" style="color: #ffffff;">
					<text>
						{{user.info.nickname || '暂无名称'}}
					</text>
				</view>
				<view class="ts-26 lh-28 m-t-30" style="color: #2c2828;">个人信息</view>
				<!-- <text class="xyicon icon-edit m-l-10"></text> -->
			</view>
			<view v-else @tap="$xyfun.toLogin()">
				<view class="ts-40 flex lh-32 p-t-20 tb" style="color: #ffffff;">
					<text>
						君能用户
					</text>
				</view>
				<view class="ts-30 lh-32 tb m-t-25" :style="css.tcm">点击进行登录</view>
			</view>
		</view>
		
		<!-- <view class="r m-l-auto ts-28 flex" @tap="$emit('showEwm')">
			<view class="ewm br-5 tc-w p-lr-20 ts-24 flex" :style="css.mcbg"><text class="xyicon icon-qrcode ts-26 m-r-10"></text> 会员码</view>
		</view> -->
		<image src="/static/img/user/bg-el1.png" class="psa dian-bg" />
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	export default {
		name: "xyUserCard",
		props: {
			data:{
				type: Object,
			}
		},
		data() {
			return {
				css:this.$xyfun.css(),
				
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods:{
			toLogin() {
				uni.showModal({
					title: '提示',
					content: '当前页面需要进行登录，确认是否登录',
					success: res => {
						if (res.confirm) {
							uni.navigateTo({
								url:'/pages/user/login'
							})
						}
					}
				})
			}
			
		}
	}
</script>
<style lang="scss">
	.xy-user-card{
		.l{
			image{width: 150rpx;height: 150rpx;border-radius: 75rpx;}
		}
		.c{
			width: 300rpx;
		}
		.r{
			position: relative;
			.ewm{height: 54rpx;line-height: 54rpx;margin-top: 28rpx;}
		}
	}
	.dian-bg{
		width: 200rpx;
		height: 300rpx;
		right: -30rpx;
		top: -45rpx;
		z-index: 1;
	}
</style>
